<template>
  <div class="cash">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">提现管理</div>
        </div>
      </div>
      <div class="middle">
        <Input ref="searchInput" placeholder="请输入业务员姓名/手机号" class="input-cls" @search="handleSearch" />
        <el-button
          v-for="(item, index) of buttonList"
          :key="index"
          :class="{ 'active': isActive == index }"
          @click="buttonClick(index)"
        >{{ item }}</el-button>
      </div>
      <div class="bottom">
        <component :is="cmpName" :list="list" @deleteItem="handleDeleteItem" @success="handleDeleteSuccess" />
      </div>
    </div>
    <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="curPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './tableList'
import WillPay from './willPay'
import HavePay from './havePay'
import Refuse from './refuse'
import { getCashList } from '@/api/cash'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    WillPay,
    HavePay,
    Refuse,
    Pagination
  },
  data() {
    return {
      buttonList: ['待审批', '待打款', '已打款', '已拒绝'],
      isActive: 0,
      cmpName: TableList,
      page: 1,
      list: [],
      query: '',
      total: 0,
      pageSize: 0,
      curPage: 0
    }
  },
  mounted() {
    this._getCashList({ page: this.page, status: 0 })
  },
  methods: {
    handleDeleteSuccess() {
      this.page = 1
      this.curPage = 1
      this.changeStatus()
    },
    handleNextPage(page) {
      this.page = page
      this.changeStatus()
    },
    handleSearch(query) {
      this.query = query
      this.changeStatus()
    },
    changeStatus() {
      switch (this.cmpName) {
        case TableList:
          this._getCashList({
            page: this.page,
            status: 0,
            condition: this.query
          })
          break
        case WillPay:
          this._getCashList({
            page: this.page,
            status: 2,
            condition: this.query
          })
          break
        case HavePay:
          this._getCashList({
            page: this.page,
            status: 1,
            condition: this.query
          })
          break
        case Refuse:
          this._getCashList({
            page: this.page,
            status: -1,
            condition: this.query
          })
          break
      }
    },
    handleDeleteItem(id) {
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === id
      })
      if (fIndex >= 0) {
        this.list.splice(fIndex, 1)
      }
      this.total--
    },
    buttonClick(index) {
      this.isActive = index
      this.list = []
      this.$refs.searchInput.clear()
      this.curPage = 1
      switch (index) {
        case 0:
          this.cmpName = TableList
          this._getCashList({ page: this.page, status: 0 })
          break
        case 1:
          this.cmpName = WillPay
          this._getCashList({ page: this.page, status: 2 })
          break
        case 2:
          this.cmpName = HavePay
          this._getCashList({ page: this.page, status: 1 })
          break
        case 3:
          this.cmpName = Refuse
          this._getCashList({ page: this.page, status: -1 })
          break
      }
    },
    _getCashList({ status, page, condition }) {
      getCashList({ status, page, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
            this.curPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.el-button {
  background: #ffff;
  height: 40px;
  &.active {
    background-color: rgba(64, 158, 255, 1);
    color: #fff;
  }
}
.cash {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 115vh;
  .content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .middle {
      display: flex;
      align-items: center;
      .input-cls {
        margin-right: 36px;
      }
    }
    .bottom {
      margin-top: 16px;
    }
  }
}
</style>
